import React, { Component } from 'react'
import {IProduct} from '../../types/product'
import {baseUrl} from '../../util/url'
import './p-item.scss'
import {withRouter,RouteComponentProps} from 'react-router-dom'

interface IProps extends RouteComponentProps{
    item:IProduct
}

class PItem extends Component<IProps> {
    render() {
        let {title,price,img,id,pid,types} = this.props.item;
        return (
            <dl className="p-reduct-item" onClick={this.goDetail}>
                <dt>
                    <img src={baseUrl+img} alt=""/>
                </dt>
                <dd>
                    <h5>{title}</h5>
                    <div>
                        {types.split(',').map((item:string) => <span key={item}>{item}</span>)}
                    </div>
                    <span>价格:{price}</span>
                </dd>
            </dl>
        )
    }

    goDetail = () => {
        this.props.history.push({pathname:'/detail',state:this.props.item})
    }
}

export default withRouter(PItem)